@section head{
    <link href="~/theme/default/show/show.index.css" rel="stylesheet" asp-append-version="true" />
}
<div v-cloak id="app" class="zb-flex zb-w zb-h" style="overflow-y: hidden">
    <div style="width: 200px;" class="zb-border-right">
        <ul class="type-list">
            <li><span :class="{'el-icon-files':true,'typeListSelected': searchType == 1}" @@click="showSearchType(1)"> 全部文件</span></li>
            <li><span :class="{'el-icon-delete':true,'typeListSelected': searchType == 99}" @@click="showSearchType(99)"> 垃圾筒</span></li>
        </ul>
    </div>
    <div class="zb-flex-1 zb-flex zb-flex-column zb-w zb-h" style="overflow-y: hidden" id="fileList">
        <div class="zb-flex" style="justify-content: space-between;">
            <el-breadcrumb separator-class="el-icon-arrow-right" v-if="searchType == 1">
                <el-breadcrumb-item :class='0 == dragInfo.targetObj?.id?"dragOvered":""'>
                    <el-link type="text" 
                             @@click="showRoot" 
                             class="el-icon-s-home">
                        <span @@dragover="dragover($event, {id:0, type:1})"
                              @@dragleave="dragleave($event)">&nbsp;根目录</span>
                    </el-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item v-for="menu in menus" 
                                    :key="menu.value"
                                    :class='menu.value == dragInfo.targetObj?.id?"dragOvered":""'>
                    <el-link @@click="showUpFiles(menu.value)">
                        <span @@dragover="dragover($event,{id:menu.value, type:1})"
                              @@dragleave="dragleave($event)">{{menu.name}}</span>
                    </el-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <el-dropdown @@command="handleNewCmd">
                        <el-button class="el-dropdown-link el-icon-plus" circle size="mini"></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-upload" command="upload">上传</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-folder" command="folder">文件夹</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-breadcrumb-item>
            </el-breadcrumb>
            <div></div>
            <div class="search">
                <el-input placeholder="请输入内容"
                          v-model="search.keywords"
                          class="input-with-select"
                          @@keyup.native="onFilter">
                    <el-button slot="append"
                               icon="el-icon-search"
                               @@click="onFilter"></el-button>
                </el-input>
            </div>
        </div>
        <ul class="table-title">
            <li class="infinite-list-item zb-flex zb-w">
                <div class="zb-flex-1">
                    <el-checkbox v-model="checkAllStatus" @@click.native="handleCheckAllStatus"></el-checkbox>
                    <span style="cursor: pointer; margin-left: 5px;" title="点击排序" @@click="changeOrderByInfo('name')">名称</span>
                    <span :class="judgeTypeClass('name')"></span>
                    <template v-if="searchType==1 && itemHasCheck">
                        <el-link type="default"
                                 icon="el-icon-delete"
                                 circle
                                 size="mini"
                                 style="margin-left: 20px;"
                                 @@click="handleBatchDelete"> 删除</el-link>
                        <el-link type="default"
                                 icon="el-icon-download"
                                 circle
                                 size="mini"
                                 style="margin-left: 20px;"
                                 @@click="handleBatchDownload"> 下载</el-link>
                    </template>
                    <template v-if="searchType==99 && itemHasCheck">
                        <el-link type="default"
                                 icon="el-icon-position"
                                 circle
                                 size="mini"
                                 style="margin-left: 20px;"
                                 @@click="handleBatchRestore"> 还原</el-link>
                    </template>
                </div>
                <div class="zb-flex-1" v-if="searchType==99">
                    原位置
                </div>
                <div class="item-flag">

                </div>
                <div class="item-flag zb-text-center" style="padding-right: 15px;" title="点击排序" @@click="changeOrderByInfo('size')">
                    <span style="cursor: pointer">大小</span>
                    <span :class="judgeTypeClass('size')"></span>
                </div>
                <div class="item-flag item-date zb-text-right" title="点击排序" @@click="changeOrderByInfo('date')">
                    <span style="cursor: pointer">{{dateTitleString}}</span>
                    <span :class="judgeTypeClass('date')"></span>
                </div>
            </li>
        </ul>
        <div class="zb-flex-1" style="overflow-y: hidden;">
            <ul class="infinite-list zb-h"
                v-infinite-scroll="load"
                infinite-scroll-disabled="disabledScroll"
                infinite-scroll-distance="10"
                style="overflow: auto;">
                <li v-for="item in records"
                    :class='"infinite-list-item zb-flex list-item "+ (item.id == dragInfo.targetObj?.id?"dragOvered":"")'
                    @@dblclick="selectedItem(item)"
                    @@dragenter="dragenter($event, item)"
                    @@dragover="dragover($event, item)"
                    @@dragleave="dragleave($event)"
                    @@dragstart="dragstart(item)"
                    @@dragend="dragend(item)"
                    draggable="true">
                    <div class="zb-flex-1 zb-flex">
                        <el-checkbox v-model="item.check" @@change="handleItemChange"></el-checkbox>
                        <el-input v-if="editid==item.id"
                                  v-model="item.name"
                                  placeholder="请输入内容"
                                  style="margin-left: 10px;"
                                  @@blur="updateName(item)"
                                  @@keypress.native.enter="unfocus($event)"></el-input>
                        <div class="fsm-item-name" v-else>
                            <span :class="{'el-icon-s-management':item.type==1,'el-icon-document':item.type!=1}" style="margin-right: 5px;"></span>
                            <template v-if="searchType==1">
                                <el-link v-if="item.type==1" @@click="showFiles(item)">{{item.name}}</el-link>
                                <el-link class="zb-cursor-pointer text-show" v-else title="点击下载" @@click="download(item.id)">{{item.name}}</el-link>
                            </template>
                            <template v-else>
                                <el-link v-if="item.type==1">{{item.name}}</el-link>
                                <el-link class="zb-cursor-pointer" v-else title="点击下载">{{item.name}}</el-link>
                            </template>
                        </div>
                    </div>
                    <div class="zb-flex-1 zb-word-nobreak" v-if="searchType==99">
                        <span>\{{item.virtual_dir}}</span>
                    </div>
                    <div class="item-flag zb-text-center color-gray">
                        <el-dropdown @@command="handleOpCmd">
                            <el-button class="el-dropdown-link el-icon-more zb-cursor-pointer" circle size="mini"></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <template v-if="searchType==1">
                                    <el-dropdown-item icon="el-icon-download" :command="'download-'+item.id">下载</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-edit" :command="'rename-'+item.id">重命名</el-dropdown-item>
                                    <el-dropdown-item icon="el-icon-delete" :command="'delete-'+item.id">删除</el-dropdown-item>
                                </template>
                                <template v-else>
                                    <el-dropdown-item icon="el-icon-position" :command="'restore-'+item.id">还原</el-dropdown-item>
                                </template>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="item-flag item-size color-gray">
                        <span class="zb-word-nobreak">{{renderSize(item.size)}}</span>
                    </div>
                    <div class="item-flag item-date color-gray zb-text-right">
                        <span v-if="searchType==1" class="zb-word-nobreak">{{item.edit_date_diff}}</span>
                        <span v-else class="zb-word-nobreak">{{item.edit_date_diff}}</span>
                    </div>
                </li>
                <li class="zb-text-center" v-if="loading" style="padding-top: 10px; padding-bottom: 10px;">
                    <span class="el-icon-loading"></span> 加载中
                </li>
            </ul>
        </div>
    </div>
    <div class="details zb-border-left" v-if="selected.status">
        <el-link class="close"
                 icon="el-icon-circle-close"
                 @@click="closeDetails"></el-link>
        <div class="title zb-border-bottom">
            <b>{{selected.record.name}}</b>
            <p>
                <el-tag type="info">{{renderSize(selected.record.size)}}</el-tag>
                <el-tag type="info">{{selected.record.edit_date_diff}}</el-tag>
            </p>
        </div>
        <ul class="log">
            <li v-if="selected.loading" class="log-loading zb-border-right zb-border-bottom"><span class="el-icon-loading"></span>&nbsp;日志抓取中</li>
            <li v-for="item in selected.logs">
                <div class="date">{{item.op_date}}</div>
                <div>
                    <span>您</span>
                    <span>&nbsp;{{item.op_content}}</span>
                </div>
            </li>
        </ul>
    </div>
    <input type="file" id="fileObj" style="display: none;" multiple @@change="upload" />
    <div class="uploadList">
        <ul>
            <li v-for="item in uploadList">
                <span>{{item.filename}}</span>
                <el-progress :text-inside="true" :stroke-width="20" :percentage="item.percentage"></el-progress>
            </li>
        </ul>
    </div>
    <el-dialog title="还原规则选择"
               :visible.sync="restoreVisible"
               width="450px">
        <div style="width: 100%;">
            <h3>发现有 <b>{{existsFiles.length}}</b> 个文件在原位置已存在，请选择处理方式</h3>
            <ul>
                <li class="restore-item">
                    <el-link @@click="restore(1)">跳过已存在的文件</el-link>
                </li>
                <li class="restore-item">
                    <el-link @@click="restore(2)">替换已存在的文件</el-link>
                </li>
                <li class="restore-item">
                    <el-link @@click="restore(3)">重命名待还原的文件</el-link>
                </li>
                <li class="restore-item">
                    <el-link @@click="showDefineFrame=true">自定义每个文件的还原原则</el-link>
                </li>
            </ul>
            <div class="zb-border" v-if="showDefineFrame">
                <ul class="zb-padding-1">
                    <li class="define-item">
                        <span>文件名</span>
                        <el-checkbox v-model="restoreCheckAll" @@click.native="handleRestoreCheckAll">全选</el-checkbox>
                        <el-checkbox v-model="positionCheckAll" @@click.native="handlePositionCheckAll">全选</el-checkbox>
                    </li>
                    <li class="define-item" v-for="item in existsFiles">
                        <span>{{item.Value}}</span>
                        <el-checkbox v-model="item.restoreCheck" @@change="handleRestoreCheck">垃圾筒</el-checkbox>
                        <el-checkbox v-model="item.positionCheck" @@change="handlePositionCheck">目标位置</el-checkbox>
                    </li>
                </ul>
                <div class="dialog-footer zb-text-right zb-padding-1">
                    <el-button @@click="restoreVisible = false" size="mini">取 消</el-button>
                    <el-button type="primary" @@click="restore(4)" size="mini">确 定</el-button>
                </div>
            </div>
            <el-checkbox v-model="isContinueSameRestore" style="margin-top: 10px;">后续所有文件都按所选择的方法进行还原</el-checkbox>
        </div>
    </el-dialog>
</div>

@section script{
    <script src="~/lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="~/module/show/show.index.js" asp-append-version="true" type="text/babel"></script>
} 